<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <!-- * 2.DOM 的体积过大会影响页面性能，假如你想在用户关闭页面时统计（计算并反馈给服务器）
 当前页面中元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数，请用 JS 配合
 原生 DOM API 实现该需求（不用考虑陈旧浏览器以及在现代浏览器中的兼容性，可以使用任意
 浏览器的最新特性；不用考虑 shadow DOM）。比如在如下页面中运行后： -->
  <!-- {
    totalElementsCount: 7,
    maxDOMTreeDepth: 4,
    maxChildrenCount: 3
  } -->

  <!-- 实现效果，点击容器内的图标，图标边框变成 border 1px solid red，点击空白处重置。 -->
  <script>
    const box = document.getElementById('box');
    function isIcon(target) {
      return target.className.includes('icon');
    }

    box.onclick = function (e) {
      e.stopPropagation();
      const target = e.target;
      if (isIcon(target)) {
        target.style.border = '1px solid red';
      }
    }
    const doc = document;
    doc.onclick = function (e) {
      const children = box.children;
      for (let i = 0; i < children.length; i++) {
        if (isIcon(children[i])) {
          children[i].style.border = 'none';
        }
      }
    }
  </script>

  <!-- 手写代码实现红绿灯效果，红灯3秒，绿灯1秒，黄灯2秒，循环重复? -->
  <!-- 三个任务交替执行 -->
  <script type="text/javascript">
    function toGreen() {
      document.getElementById("light").style.background = 'green';
      setTimeout(toYellow, 3000)
    }
    function toYellow() {
      document.getElementById("light").style.background = 'yellow';
      setTimeout(toRed, 1000)
    }
    function toRed() {
      document.getElementById("light").style.background = 'red';
      setTimeout(toGreen, 2000)
    }
    toGreen();
  </script>
  <!-- way2 -->
  <script>
    (function turnColoe() {
      var that = this;
      setTimeout(function () {
        light.className = 'yellow';
        setTimeout(function () {
          light.className = 'red';
          setTimeout(function () {
            light.className = 'green';
            setTimeout(turnColoe(), 0);
          }, 2000);
        }, 1000)
      }, 3000)
    })()
  </script>
  <!-- 是否可以改造成promise -->

  <script>
    function sleep(color, time) {
      return new Promise((resolve, reject) => {
        light.className = color;
        setTimeout(resolve, time)
      })
    }

    while (true) {
      await sleep('yellow', 1000)
      await sleep('red', 2000)
      await sleep('green', 3000)
    }

    sleep()
  </script>

  <!-- yiled -->
  <script>
    function func(color, duration) {
      return new Promise(function (resolve, reject) {
        light.style.backgroundColor = color;
        setTimeout(function () {
          it.next();
        }, duration)
      })
    }

    function* main() {
      while (1) {
        yield func('red', 2000);
        yield func('yellow', 1000);
        yield func('green', 3000);
      }
    }

    var it = main();
    it.next();
  </script>

</body>

</html>

<!-- https://www.jianshu.com/p/04a6e7f48b63 -->